<script setup>
 import {reactive, ref,defineEmits} from 'vue'
 import {captchalAPI,captchaAPI,cellphoneAPI} from '../../api'
 import { notification } from 'ant-design-vue';
 import {
  CloseCircleOutlined
} from '@ant-design/icons-vue';
import useStore from '../../store'
let loginDate = reactive({
  phone:'',
  captcha:''
 })
 let errorsize = ref(false)
 let num = ref(5)
 let isShow = ref(true)
 const obtain = async () =>{
   if(!(/^1[3456789]\d{9}$/.test(loginDate.phone))) return errorsize.value = true
   errorsize.value = false
   isShow.value = false
   const res = await captchalAPI(loginDate.phone)
   console.log(res);
  let time =  setInterval(()=>{


    if(num.value === 0) {
      num.value = 5
      isShow.value = true
      clearInterval(time)
    }
        num.value = num.value-1
        console.log(num.value);
      },1000)
 }
 const emits = defineEmits(['outden']);

// 登录
let isSzie = ref(false)
const {useData,useLogin} = useStore()
const signin = async () => {
  if(!(/^\d{4}$/.test(loginDate.captcha)) || !(/^1[3456789]\d{9}$/.test(loginDate.phone))) return isSzie.value = true
  isSzie.value = false
  const {data:{data:res}} = await captchaAPI(loginDate.phone,loginDate.captcha)
  console.log(res);
  if(res) {
    const {data:coderes}  = await cellphoneAPI(loginDate.phone,loginDate.captcha)
    useData.userdata = coderes.profile
    useLogin.cookie = coderes.cookie
    emits('outden')
  }
}
</script>

<template>
  <div class="phonelogin">
    <div class="phonelogin-onoe">
      <input type="text" v-model="loginDate.phone" placeholder="请输入手机号">
    </div>
    <div class="Verification">
      <div class="inpcode">
        <input type="text" v-model="loginDate.captcha" placeholder="请输入验证码">
      </div>
      <button class="butcode" @click="obtain" :disabled="!isShow">{{isShow?'获取验证码':num+'秒后重发'}}</button>
    </div>
    <div class="pherror">
      <div  v-if="errorsize">
        <close-circle-outlined /><span>手机号码格式错误,请更换后重试</span>
      </div>
      <div  class="ycode" v-if="isSzie">
        <close-circle-outlined /><span>请正确输入验证码和手机号</span>
      </div>
    </div>
    <div class="signin" @click="signin">登录</div>
  </div>

  <div class="pwd">
    <a href="#" class="pwd-a">密码登录</a>
  </div>
</template>

<style lang="less" scoped>
input,button {
  border: none;
  outline: none;
}
.phonelogin {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 60px;
  margin-bottom: 10px;
  .phonelogin-onoe {
    width: 320px;
    height: 36;
    input {
      padding-left: 30px;
      width: 100%;
      height: 36px;
      font-size: 12px;
      border-radius: 20px;
      border: 1px solid rgba(0,0,0,.1);
      box-sizing: border-box;
      
    }
  }
  .Verification {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .inpcode {
      padding-left: 30px;
      width: 193px;
      height: 36px;
      line-height: 30px;
      font-size: 12px;
      border: 1px solid rgba(0,0,0,.1);
      border-radius: 20px;
      margin-right: 10px;
    }
    .butcode {
      background: #ff3a3a;
      border-radius: 20px;
      width: 119px;
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      &:hover {
        cursor: pointer;
      }
    }
 
  }
  .signin {
      background: #ff3a3a;
      border-radius: 20px;
      line-height: 36px;
      width: 320px;
      height: 36px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      margin-top: 10px;
      margin-bottom: 20px;
      &:hover {
        cursor: pointer;
      }
    }
}
.pherror {
    color: #fa5b5b;
    font-size: 12px;
    line-height: 20px;
    margin-right: 130px;
    margin-top: 20px;
    span {
      padding-left: 5px;
    }
    .ycode {
      margin-right: 30px;
    }
}
.pwd {
    margin: 0 auto;
    padding-bottom: 30px;
    width: 320px;
    color: #666;
    .pwd-a {
      color: #666;
      font-size: 12px;
    }
}
</style>